<template>
  <div id="app">
    <h1>AI Talk</h1>
    <div class="dialog">

      <div class="user-message" v-for="(userMsg, index) in userMessages" :key="index">
        <strong>You:</strong> {{ userMsg }}
      </div>

      <div class="ai-message" v-for="(aiMsg, index) in aiMessages" :key="index">
        <strong>AI:</strong> {{ aiMsg }}
      </div>
    </div>

    <input v-model="question" placeholder="Ask a question..." @keyup.enter="sendQuestion" />
    <button @click="sendQuestion">Send</button>
  </div>
</template>

<script>
import axios from 'axios';
import {send} from "@/api/ai/login";

export default {
  data() {
    return {
      question: '',
      userMessages: [], // 存储用户发送的问题
      aiMessages: [],   // 存储AI的响应
    };
  },
  methods: {
      sendQuestion() {
      if (this.question.trim() === '') {
        alert('Please enter a question.');
        return;
      }
      send(this.question).then(response => {
        const aiResponse = response.replace(/^data:/, '');
          this.aiMessages.push(aiResponse);
          this.userMessages.push(this.question);
          this.question = '';
        })
        .catch(error => {
          console.error('Error sending question:', error);
          alert('Failed to send question. Please try again later.');
        });
    },
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.dialog {
  max-width: 600px;
  margin: 0 auto;
}

.user-message, .ai-message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  clear: both;
}

.user-message {
  background-color: #ecf0f1;
  float: left;
  max-width: 45%;
}

.ai-message {
  background-color: #bdc3c7;
  color: white;
  float: right;
  max-width: 45%;
}

input {
  padding: 10px;
  font-size: 16px;
  margin-top: 20px;
  width: calc(100% - 22px); /* Subtract padding and border width */
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
}
</style>
